<template>
  <div class="login-container">
    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>
    
    <!-- 登录卡片 -->
    <div class="login-card">
      <div class="login-header">
        <h2 class="login-title">系统登录</h2>
        <p class="login-desc">请输入账号密码登录系统</p>
      </div>
      
      <el-form 
        ref="loginFormRef" 
        :model="loginForm" 
        :rules="loginRules" 
        class="login-form"
      >
        <!-- 账号输入 -->
        <el-form-item prop="username">
          <el-input 
            v-model="loginForm.username" 
            placeholder="请输入账号" 
            prefix-icon="User"
            :class="{ 'input-focus': usernameFocus }"
            @focus="usernameFocus = true"
            @blur="usernameFocus = false"
          />
        </el-form-item>
        
        <!-- 密码输入 -->
        <el-form-item prop="password">
          <el-input 
            v-model="loginForm.password" 
            type="password" 
            placeholder="请输入密码" 
            prefix-icon="Lock"
            :class="{ 'input-focus': passwordFocus }"
            @focus="passwordFocus = true"
            @blur="passwordFocus = false"
            show-password
          />
        </el-form-item>
        
        <!-- 验证码 -->
        <el-form-item prop="code">
          <div class="code-container">
            <el-input 
              v-model="loginForm.code" 
              placeholder="请输入验证码" 
              prefix-icon="Key"
              :class="{ 'input-focus': codeFocus }"
              @focus="codeFocus = true"
              @blur="codeFocus = false"
            />
            <div class="code-img" @click="refreshCode">
              <img :src="codeUrl" alt="验证码" class="code-img-src" />
              <div class="code-refresh" @click.stop="refreshCode">
                <el-icon size="16"><Refresh /></el-icon>
              </div>
            </div>
          </div>
        </el-form-item>
        
        <!-- 记住密码 -->
        <el-form-item class="remember-item">
          <el-checkbox v-model="loginForm.remember" label="记住密码" />
          <el-link type="primary" class="forgot-link" @click="showForgotDialog = true">
            忘记密码?
          </el-link>
        </el-form-item>
        
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button 
            type="primary" 
            class="login-btn" 
            @click="handleLogin"
            :loading="loginLoading"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
      
      <!-- 其他登录方式 -->
      <div class="other-login">
        <div class="other-line"></div>
        <span class="other-text">其他登录方式</span>
        <div class="other-line"></div>
      </div>
      
      <div class="social-login">
        <el-button icon="Wechat" class="social-btn wechat" circle />
        <el-button icon="Alipay" class="social-btn alipay" circle />
        <el-button icon="Twitter" class="social-btn twitter" circle />
      </div>
    </div>
    
    <!-- 忘记密码弹窗 -->
    <el-dialog 
      title="忘记密码" 
      v-model="showForgotDialog" 
      width="400px"
    >
      <el-form :model="forgotForm" :rules="forgotRules" ref="forgotFormRef">
        <el-form-item prop="username">
          <el-input v-model="forgotForm.username" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item prop="email">
          <el-input v-model="forgotForm.email" placeholder="请输入注册邮箱" />
        </el-form-item>
        <el-form-item prop="verifyCode">
          <div class="code-container">
            <el-input v-model="forgotForm.verifyCode" placeholder="请输入验证码" />
            <el-button 
              type="text" 
              class="send-code"
              :disabled="sendCodeDisabled"
              @click="sendVerifyCode"
            >
              {{ sendCodeText }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showForgotDialog = false">取消</el-button>
        <el-button type="primary" @click="handleResetPassword">重置密码</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import { Refresh, User, Lock, Key,   } from '@element-plus/icons-vue';

// 路由实例
const router = useRouter();

// 登录表单
const loginForm = reactive({
  username: '',
  password: '',
  code: '',
  remember: false
});

// 表单验证规则
const loginRules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 20, message: '账号长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 4, message: '验证码长度为4个字符', trigger: 'blur' }
  ]
};

// 忘记密码表单
const forgotForm = reactive({
  username: '',
  email: '',
  verifyCode: ''
});

const forgotRules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  verifyCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ]
};

// 状态管理
const loginFormRef = ref(null);
const forgotFormRef = ref(null);
const loginLoading = ref(false);
const showForgotDialog = ref(false);
const codeUrl = ref('');
const sendCodeDisabled = ref(false);
const sendCodeText = ref('发送验证码');
const countdown = ref(60);

// 输入框焦点状态
const usernameFocus = ref(false);
const passwordFocus = ref(false);
const codeFocus = ref(false);

// 初始化验证码
onMounted(() => {
  refreshCode();
  // 读取本地存储的记住密码
  const savedUser = localStorage.getItem('savedUser');
  if (savedUser) {
    const { username, password } = JSON.parse(savedUser);
    loginForm.username = username;
    loginForm.password = password;
    loginForm.remember = true;
  }
});

// 刷新验证码
const refreshCode = () => {
  // 实际项目中这里应该请求后端接口获取验证码
  // 这里用随机数模拟
  const random = Math.random().toString(36).substring(2, 6).toUpperCase();
  // 生成简单的验证码图片（实际项目中应该是后端返回的图片URL）
  codeUrl.value = `data:image/svg+xml;base64,${btoa(`
    <svg width="120" height="40" xmlns="http://www.w3.org/2000/svg">
      <rect width="100%" height="100%" fill="#f5f7fa" />
      <text x="20" y="28" font-size="20" font-weight="bold" fill="#409eff">${random}</text>
      <line x1="10" y1="${Math.random()*30+5}" x2="110" y2="${Math.random()*30+5}" stroke="#ddd" stroke-width="1" />
      <line x1="10" y1="${Math.random()*30+5}" x2="110" y2="${Math.random()*30+5}" stroke="#ddd" stroke-width="1" />
    </svg>
  `.trim())}`;
};

// 发送验证码
const sendVerifyCode = () => {
  forgotFormRef.value.validateField(['username', 'email'], (err) => {
    if (!err) {
      // 模拟发送验证码
      sendCodeDisabled.value = true;
      const timer = setInterval(() => {
        countdown.value--;
        sendCodeText.value = `${countdown.value}s后重发`;
        if (countdown.value <= 0) {
          clearInterval(timer);
          sendCodeDisabled.value = false;
          sendCodeText.value = '发送验证码';
          countdown.value = 60;
        }
      }, 1000);
      ElMessage.success('验证码已发送到您的邮箱');
    }
  });
};

// 登录处理
const handleLogin = () => {
  loginFormRef.value.validate((valid) => {
    if (valid) {
      loginLoading.value = true;
      // 模拟登录请求
      setTimeout(() => {
        loginLoading.value = false;
        // 记住密码
        if (loginForm.remember) {
          localStorage.setItem('savedUser', JSON.stringify({
            username: loginForm.username,
            password: loginForm.password
          }));
          localStorage.setItem("token","2131232213312")
        } else {
          localStorage.removeItem('savedUser');
        }
        ElMessage.success('登录成功');
        router.push('/');
      }, 1500);
    }
  });
};

// 重置密码
const handleResetPassword = () => {
  forgotFormRef.value.validate((valid) => {
    if (valid) {
      // 模拟重置密码请求
      setTimeout(() => {
        ElMessage.success('密码重置链接已发送到您的邮箱');
        showForgotDialog.value = false;
      }, 1000);
    }
  });
};
</script>

<style scoped>
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f0f2f5;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.1), rgba(64, 158, 255, 0.05));
}

.circle-1 {
  width: 600px;
  height: 600px;
  top: -300px;
  left: -300px;
}

.circle-2 {
  width: 400px;
  height: 400px;
  bottom: -200px;
  right: -200px;
}

.circle-3 {
  width: 200px;
  height: 200px;
  top: 20%;
  right: 10%;
}

/* 登录卡片 */
.login-card {
  width: 420px;
  padding: 36px 40px 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  z-index: 10;
  transition: all 0.3s ease;
}

.login-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* 登录头部 */
.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-title {
  font-size: 24px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 8px;
}

.login-desc {
  font-size: 14px;
  color: #86909c;
}

/* 表单样式 */
.login-form {
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  height: 44px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.el-input.input-focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.el-input__prefix {
  left: 12px;
  color: #86909c;
}

/* 验证码容器 */
.code-container {
  display: flex;
  gap: 10px;
}

.code-img {
  position: relative;
  width: 120px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.code-img-src {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.code-refresh {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: all 0.2s;
}

.code-refresh:hover {
  opacity: 1;
}

/* 记住密码 */
.remember-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.forgot-link {
  font-size: 14px;
  margin-left: 190px;
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  height: 44px;
  font-size: 16px;
  border-radius: 8px;
  background-color: #409eff;
  border-color: #409eff;
  transition: all 0.3s;
}

.login-btn:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.login-btn:disabled {
  background-color: #a0cfff;
  border-color: #a0cfff;
}

/* 其他登录方式 */
.other-login {
  display: flex;
  align-items: center;
  margin: 25px 0 15px;
}

.other-line {
  flex: 1;
  height: 1px;
  background-color: #e5e6eb;
}

.other-text {
  padding: 0 15px;
  font-size: 14px;
  color: #86909c;
}

/* 社交登录 */
.social-login {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s;
}

.social-btn:hover {
  transform: translateY(-3px);
}

.wechat {
  color: #07c160;
  background-color: rgba(7, 193, 96, 0.1);
}

.alipay {
  color: #1677ff;
  background-color: rgba(22, 119, 255, 0.1);
}

.twitter {
  color: #1da1f2;
  background-color: rgba(29, 161, 242, 0.1);
}

/* 忘记密码弹窗 */
.send-code {
  min-width: 100px;
  padding: 0;
}

/* 响应式调整 */
@media (max-width: 576px) {
  .login-card {
    width: 90%;
    padding: 28px 24px 15px;
  }
  
  .circle-1 {
    width: 400px;
    height: 400px;
    top: -200px;
    left: -200px;
  }
  
  .circle-2 {
    width: 300px;
    height: 300px;
    bottom: -150px;
    right: -150px;
  }
}

</style>